<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>信发系统（网页预览）</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/css/admin/player.css}">
</head>
<body>
<div class="app-container" id="app-container">
    <div class="scene-box">
        <div class="scene" v-if="list.scene" :style="list.scene.style">
            <div class="group-box">
                <div class="group" v-for="group in list.scene.groups"
                     :style="{left:(group.left/fontSize)+'rem',top:(group.top/fontSize)+'rem',
             width:(group.width/fontSize)+'rem',height:(group.height/fontSize)+'rem' }">
                    <div class="module-box">
                        <div class="module" v-if="group.module">
                            <div class="module-media" :style="{backgroundImage:'url('+group.module.thumbnailUrl+')'}" style="background-size: cover">
                                <video v-if="group.module.type==1" :src="group.module.url" loop
                                       autoplay></video>
                                <img :src="group.module.url" v-if="group.module.type==0">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="programId" th:value="${programId}"/>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/lib/vue/v2.5.16/vue.min.js}"></script>
<script th:src="@{/js/vue.js}"></script>

<script>
    var context = $("meta[name='ctx']").attr("content") || '';
    //动态修改1rem的大小
    function fontSize() {
        var width=$(window).width();
        console.log(width);
        $("html").css("fontSize",width/320*20+"px");
        console.log($("html").css("fontSize"))
    }
    fontSize();
    $(window).resize(function () {
        fontSize();
    })
    var defaultOption={};
    //设置
    // 获取节目数据
    var programId = $('input[name="programId"]').val();
    $.ajax({
        type: "post",
        url: context + '/cpProgram/get/' + programId,
        async: false,
        dataType: "json",
        success: function (result) {
            defaultOption = JSON.parse(result.data.json);
        }
    })
    //数据检查
    function dataCheck(option){
        //对数据进行检查，是否scenes为空，groups为空，modules为空，若存在为空的情况则停止程序执行，并给出提示
        if(option.scenes==undefined||option.scenes==""){
            console.log("场景数组不能为空")
            return;
        }else {
            for(var i of option.scenes){
                if(i.groups==undefined||i.groups==""){
                    console.log("分组不能为空");
                    return;
                }else {
                    for(var j of i.groups){
                        if(j.modules==undefined||j.modules==""){
                            console.log("模块不能为空")
                            return;
                        }else {
                            return true;
                        }
                    }
                }

            }
        }
    }
    if(dataCheck(defaultOption)){
        console.log("数据结构正确");
        // 当前场景
        defaultOption.scene = {};
        //当前场景的序号
        defaultOption.order = 0;
        V.list = defaultOption;
        sdk.play();
    }

</script>
</body>
</html>